<template>
    <div style="width:100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;">
    <el-menu
    :default-active="activeIndex2"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
    router
    >
        <img class="logo" rel="icon" src="../../../public/vite.svg" />
        <span class="title">后台管理系统</span>
        <div style="width:50px;"></div>
        <MenuItem />
        <Dropdown />
    </el-menu>
    <el-card shadow="hover" style="height:35px;">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="grid-content ep-bg-purple">
                    <el-page-header :icon="ArrowLeft" style="position: relative;bottom:15px;" @back="goBack">
                        <template #content>
                            <el-breadcrumb :separator-icon="ArrowRight">
                                <el-breadcrumb-item :to="{ path: '/homePage' }"><span style="font-weight:bolder">工作台</span></el-breadcrumb-item>
                                <!--<el-breadcrumb-item v-for="(item,index) in routeStore().globalRoute" :key="index" :to="{ path: item.path as string }"><span style="font-weight:bolder">{{item.title}}</span></el-breadcrumb-item>-->
                            </el-breadcrumb>
                        </template>
                    </el-page-header>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="grid-content ep-bg-purple">
                    <el-tabs
                        v-model="editableTabsValue"
                        type="card"
                        :closable="isClos"
                        class="demo-tabs"
                        @edit="handleTabsEdit"
                        @tab-change="tabChange"
                        style="position: relative;bottom:22px;"
                    >
                        <el-tab-pane
                        v-for="(item,index) in routeStore().globalRoute"
                        :key="index"
                        :label="(item.title as string)"
                        :name="(item.path as string)"
                        >
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content ep-bg-purple">
                    <el-tag class="tag" el-check-tag checked>当前页面：{{ nowPageStore().nowPage }}</el-tag>
                </div>
            </el-col>
          </el-row>
    </el-card>
    </div>
</template>
<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import MenuItem from './menu-item.vue'
import Dropdown from './dropdown.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { routeStore,nowPageStore} from '@/store/modules/routesInfo'
import router from '@/router'
import type { TabPaneName,TabsPaneContext } from 'element-plus'

onMounted(()=>{
    console.log('1',routeStore().globalRoute)
    editableTabsValue.value=routeStore().globalRoute[routeStore().globalRoute.length-1].path as string
})
const activeIndex2 = ref('/homePage')
const handleSelect = (key: string, keyPath: string[]) => {
    editableTabsValue.value=key
}
const goBack = () => {
    router.go(-1)
}
let isClos = ref<boolean>(true);
const editableTabsValue = ref<string>()
const handleTabsEdit = (
    targetName: TabPaneName | undefined,
    action: 'remove' | 'add'
    ) => {
    if (action === 'remove') {
        const tabs = routeStore().globalRoute
        let activeName = editableTabsValue.value
        if (activeName === targetName) {
        tabs.forEach((tab, index) => {
            if (tab.path === targetName) {
                const nextTab = tabs[index + 1] || tabs[index - 1]
                if (nextTab) {
                    activeName = nextTab.path as string
                }
            }
        })
        }
        editableTabsValue.value = activeName
        routeStore().globalRoute = tabs.filter((tab) => tab.path !== targetName)
    }
}
const tabChange = (name: TabPaneName) =>{
    router.push(name as string);
}
</script>
<style scoped>
.logo{
    margin-left:30px;
    margin-right:10px;
    margin-top:10px;
    width: 40px;
    height: 40px;
}
.title{
    font-size: 20px;
    font-weight:bolder;
    margin-top: 15px;
    color: #9370D8;
}
.tag{
    position: relative;
    bottom:21px;
    float: right;
    width:200px;
    height:36px;
    font-weight:bolder;
    font-size:18px;
    margin-right: 0px
}
</style>